<template>
	<view class="user">
		<view class="top" @click="goUserInfo">
			<view class="group">
				<view class="userinfo">
					<view class="pic">
						<u-avatar :src="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url||''"
							size="100%"></u-avatar>

					</view>
					<view class="text" v-if="hasLogin">
						<view class="nickname">{{userInfo.nickname||userInfo.username||userInfo.mobile||'未登录'}}</view>
						<view class="year">
							<uni-dateformat :date="userInfo.register_date"
								:threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
							注册
						</view>
					</view>
					<view class="text" v-else>
						<view class="nickname">点击登录</view>
					</view>

				</view>

				<view class="more">
					<u-icon name="arrow-right" color="#fff" size="30rpx"></u-icon>
				</view>
			</view>

			<view class="bg" :class="hasLogin?'bg-active':'bg-inactive'">
			</view>
		</view>

		<view class="main">
			<card-show style="margin-top: 20rpx;" :contents="cardConfig" @EmitClick="handleClick">
				<view class="info" slot='title'>
					<view class="item">文章被赞 <text class="stat">{{totalObj.likeNum}}</text></view>
					<view class="item">文章被评 <text class="stat">{{totalObj.commentNum}}</text></view>
					<view class="item">我的发文 <text class="stat">{{totalObj.artNum}}</text></view>
				</view>
			</card-show>
		</view>

		<!-- <u-button @click="tempClick"> 去登录</u-button> -->

	</view>
</template>

<script>
	import {
		cardConfig
	} from "./config/index.config.js"
	import {
		store,
		mutations,
	} from "@/uni_modules/uni-id-pages/common/store.js"
	import {
		loginRelease,
	} from "@/utils/common.js"

	import pagesJson from '@/pages.json'

	const db = uniCloud.database()

	export default {
		async onShow(options) {
			this.getTotal()
		},
		data() {
			return {
				cardConfig,
				totalObj: {
					artNum: 0,
					likeNum: 0,
					commentNum: 0,

				},
			};
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin() {
				return store.hasLogin
			}

		},
		methods: {
			async getTotal() {
				if (!this.hasLogin) return;
				let artCount = await db
					.collection("article")
					.where(`user_id == $cloudEnv_uid`)
					.count();
				this.totalObj.artNum = artCount.result?.total ?? 0;

				let likeCount = await db
					.collection("article")
					.where(`user_id == $cloudEnv_uid`)
					.groupBy("user_id")
					.groupField("sum(like_count) as totalScore")
					.get();

				this.totalObj.likeNum = likeCount.result?.data[0]?.totalScore ?? 0;

				let commentCount = await db
					.collection("article")
					.where(`user_id == $cloudEnv_uid`)
					.groupBy('user_id')
					.groupField("sum(comment_count) as commentTotal")
					.get();
				console.log('评论', {
					commentCount
				});

				this.totalObj.commentNum = commentCount.result?.data[0]?.commentTotal ?? 0;

				// console.log(this.totalObj);
			},
			tempClick() {
				// console.log(uniCloud.getCurrentUserInfo());
			},
			handleClick(data) {
				const {
					item
				} = data
				// 退出登录处理
				if (item.type == 'emit' && item.effect == 'loginOut') {
					this.loginOut()
				} else if (item.type == 'emit' && item.effect == 'about') {
					uni.showModal({
						title: '提示',
						content: '写点什么好呢？就写这句吧 ^_^',

					});
				}

			},
			async loginOut() {
				try {
					console.log('loginOut');
					// if (!this.hasLogin) {
					// 	uni.showToast({
					// 		title: "已经退出了",
					// 		icon: "none"
					// 	})
					// 	return
					// }
					await loginRelease()
					uni.showModal({
						title: "是否确认退出?",
						success: res => {
							console.log(res);
							if (res.confirm) {
								mutations.logout()
							}
						}
					})
				} catch (e) {
					console.log('伪错误', {
						e
					});
				}
			},
			goUserInfo() {
				if (!store.hasLogin) {
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withpwd?uniIdRedirectUrl=' +
							'/' + this.$mp.page.route
					})
					return
				}
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.user {
		padding: 20rpx;

		.top {
			height: 300rpx;
			background: #bbb;
			padding: 0 30rpx;
			border-radius: 20rpx;
			padding-top: var(--status-bar-height);
			position: relative;
			display: flex;
			align-items: center;
			overflow: hidden;

			.group {
				position: relative;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				color: #fff;

				.userinfo {
					display: flex;
					width: 100%;
					align-items: center;

					.pic {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
						border: 2px solid #fff;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						padding-left: 20rpx;

						.nickname {
							font-size: 44rpx;
							font-weight: 600;
						}

						.year {
							font-size: 26rpx;
							opacity: 0.6;
							padding-top: 5rpx;
						}
					}
				}

				.more {
					.iconfont {
						font-size: 40rpx;
					}
				}

			}

			.bg {
				position: absolute;
				filter: blur(20px);
				transform: scale(2);
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}

		.main {
			width: 100%;
			min-height: 200rpx;
			// background: #fff;

			.info {
				padding: 10rpx 30rpx;
				display: flex;
				font-size: 30rpx;

				.item {
					padding-right: 20rpx;
					color: #888;
					font-weight: 500;

					text {
						font-weight: 600;
						color: #333;
					}

					.stat {
						margin-left: 8rpx;
					}
				}
			}
		}

	}
</style>